<template>
  <div class="convenience-store">
    <el-row class="container">
      <div class="title">logo：</div>
      <cover :cover="shop.logo" :ratio="logo" @cover="handleCoverChange" />
    </el-row>
    <el-row class="container">
      <div class="title">店招：</div>
      <cover :cover="shop.background" :ratio="store" @cover="handleStoreChange" />
    </el-row>
    <el-row class="container">
      <div class="title">营业时间：</div>
      <el-time-select v-model="shop.s_time" :editable="false" style="margin-right: 20px" placeholder="起始时间" :picker-options="{ start: '00:00', step: '00:30', end: '23:30' }" />
      <el-time-select v-model="shop.e_time" :editable="false" placeholder="结束时间" :picker-options="{ start: '00:30', step: '00:30', end: '23:30' }" />
    </el-row>
    <el-row class="container">
      <div class="title">门店状态：</div>
      <el-switch v-model="states" active-color="#13ce66" inactive-color="#ff4949" active-text="开启" inactive-text="关闭" />
    </el-row>
    <el-row class="container">
      <div class="title">店内配送：</div>
      <el-switch v-model="able_delivery" active-color="#13ce66" inactive-color="#ff4949" active-text="开启" inactive-text="关闭" />
    </el-row>
    <el-button type="primary" @click="handleSave">保存</el-button>
  </div>
</template>

<script>
import { convenienceStore, getConvenienceStore } from '@/api/params'
import Cover from '@/components/cover'
export default {
  name: 'ConvenienceStore',
  components: {
    Cover
  },
  data() {
    return {
      shop: {
        logo: '',
        background: '',
        s_time: '',
        e_time: ''
      },
      states: false,
      logo: '187*187',
      store: '1080*302',
      able_delivery: false
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    async getInfo() {
      const res = await getConvenienceStore()
      const { shop } = res.data
      if (!shop) {
        return
      } else {
        this.shop = shop
      }
      this.shop.s_time = shop.s_time.substring(0, 5)
      this.shop.e_time = shop.e_time.substring(0, 5)
      this.states = Number(shop.status) === 1
      this.able_delivery = Number(shop.able_delivery) === 1
    },
    handleCoverChange(pics) {
      this.shop.logo = pics
    },
    handleStoreChange(pics) {
      this.shop.background = pics
    },
    async handleSave() {
      const flag = this.validity()
      if (flag) {
        this.shop.status = this.states ? 1 : 0
        this.shop.able_delivery = this.able_delivery ? 1 : 0
        await convenienceStore({ ...this.shop })
        this.$message.success({
          message: '保存成功',
          duration: 1000
        })
      }
    },
    validity() {
      const { shop } = this
      if (shop.logo.trim() === '') {
        this.$message.warning({
          message: 'logo图不能为空',
          duration: 1000
        })
        return false
      }
      if (shop.background.trim() === '') {
        this.$message.warning({
          message: '店面图不能为空',
          duration: 1000
        })
        return false
      }
      if (!shop.s_time || !shop.e_time) {
        this.$message.warning({
          message: '开始时间或者结束时间不能为空',
          duration: 1000
        })
        return false
      }
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.convenience-store {
  width: 100%;
  .container {
    width: 100%;
    display: flex;
    margin-bottom: 20px;
    align-items: center;
    .title {
      width: 100px;
    }
  }
}
</style>
